<template>
  <a-modal
    title="批量导入"
    :width="520"
    :visible="visible"
    :maskClosable="false"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        取消
      </a-button>
      <a-button
        key="submit"
        type="primary"
        :disabled="fileList.length === 0"
        :loading="uploading"
        style="margin-top: 16px"
        @click="handleUpload"
      >
        {{ uploading ? '导入中' : '导入' }}
      </a-button>
    </template>
    <a-form :form="form">
      <a-form-item
        :wrapperCol="infoWrapperCol"
      >
        <a-alert
          description="导入或输入的密码仅作首次验证使用，不会存储。"
          type="info"
          show-icon
        />
      </a-form-item>
      <a-form-item
        label="模板下载："
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a href="http://101.34.248.214:8080/resource/主机导入模板.xlsx">主机导入模板.xlsx</a>
      </a-form-item>
      <a-form-item
        label="主机分组"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-tree-select
          v-decorator="['group', {rules: [{ required: true, message: '请选择主机分组！' }]}]"
          style="width: 100%"
          :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
          :treeData="groupTree"
          placeholder="请选择主机分组"
          treeDefaultExpandAll
        >
                  <span slot="title" slot-scope="{ id }">{{ id }}
                  </span>
        </a-tree-select>
      </a-form-item>
      <a-form-item
        label="导入数据"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <!--        <UpdateButton></UpdateButton>-->
        <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
          <a-button>
            <a-icon type="upload"/>
            点击上传
          </a-button>
        </a-upload>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script type="text/jsx">
  import * as groupApi from '@/api/main/group'
  import * as api from '@/api/main/host'

  export default {
    name: 'ImportForm',
    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
          md: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 },
          md: { span: 17 }
        },
        infoWrapperCol: {
          xs: { span: 24 },
          md: { span: 20, offset: 3 }
        },
        visible: false,
        groupTree: [],
        fileList: [],
        uploading: false,
        form: this.$form.createForm(this)
      }
    },
    methods: {
      // 初始化方法
      open() {
        this.getGroupTree()
        this.visible = true
      },
      getGroupTree() {
        groupApi.getList().then(res => {
          this.groupTree = res.data.data
        })
      },
      handleRemove(file) {
        const index = this.fileList.indexOf(file)
        const newFileList = this.fileList.slice()
        newFileList.splice(index, 1)
        this.fileList = newFileList
      },
      beforeUpload(file) {
        this.fileList = [...this.fileList, file]
        return false
      },
      handleUpload() {
        const { form: { validateFields } } = this
        validateFields((errors, values) => {
          if (!errors) {
            const { fileList } = this
            const formData = new FormData()
            fileList.forEach(file => {
              formData.append('file', file)
            })
            formData.append('group', values.group)
            this.uploading = true
            api.importObj(formData).then((res) => {
              this._handle_response(res)
            })
          }
        })
      },
      _handle_response(res) {
        if (res.success) {
          this.messageInfo(res.data.data)
        } else {
          this.uploading = false
          this.$message.error('导入失败')
        }
      },
      messageInfo(res) {
        this.$info({
          title: '导入结果',
          icon: 'info-circle',
          content: this._messageForm(res),
          okText: '知道了',
          onOk: this.handleCancel
        })
      },
      _messageForm(res) {
        return (
          <div>
            <a-form labelCol={{ span: 7 }} wrapperCol={{ span: 14 }}>
              <a-form-item label="导入成功：" style="margin: 0">{res.success.length}</a-form-item>
              {res.skip.length > 0 && <a-form-item label="重复数据：" style="margin: 0;color: #1890ff">
                <a-tooltip>
                  <template slot="title">
                    相关数据行{res.skip.join(', ')}
                  </template>
                  {res.skip.length}
                </a-tooltip>
              </a-form-item>}
              {res.invalid.length > 0 && <a-form-item label="无效数据：" style="margin: 0;color: #1890ff">
                <a-tooltip>
                  <template slot="title">
                    相关数据行{res.invalid.join(', ')}
                  </template>
                  {res.invalid.length}
                </a-tooltip>
              </a-form-item>}
              {res.repeat.length > 0 && <a-form-item label="重复主机名：" style="margin: 0;color: #1890ff">
                <a-tooltip>
                  <template slot="title">
                    相关数据行{res.repeat.join(', ')}
                  </template>
                  {res.repeat.length}
                </a-tooltip>
              </a-form-item>}
            </a-form>
          </div>
        )
      },
      // [取消按钮]重置数据,关闭弹框
      handleCancel() {
        this.form.resetFields()
        this.uploading = false
        this.fileList = []
        this.visible = false
        this.$emit('ok')
      }
    }
  }
</script>
